<template>
  <div class="container">
    <div class="todo-title">待处理事项</div>
    <div class="todo-container">
      <div>
        <div class="item-text">待发货</div>
        <div class="item-data">{{ toDo.un_shipped_order }}</div>
      </div>
      <div>
        <div class="item-text">退款中</div>
        <div class="item-data">{{ toDo.refund_order }}</div>
      </div>
      <div>
        <div class="item-text">库存预警</div>
        <div class="item-data">{{ toDo.warehouse_order }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    toDo: {
      type: Object,
      default: () => { return {} }
    }
  }
}
</script>

<style lang="css" scoped>
.container{
  height: 208px;
  width: 100%;
  padding: 20px 0;
  border-radius: 5px;
  background-color: #fff;
}
.todo-title{
  padding: 0 25px;
  font-size: 17px;
  font-family: '微软雅黑';
  font-weight: 600;
  letter-spacing: 1px;
}
.todo-container{
  display: flex
}
.todo-container>div{
  flex: 1;
  margin: 20px 3%;
  height: 100px;
  text-align: center;
}
.item-text{
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  /* font-weight: 600; */
}
.item-data{
  height: 80px;
  line-height: 80px;
  font-size: 40px;
  font-weight: 600;
  color: #000;
}
</style>